<template>
  <a-row :gutter="10">
    <a-col :md="4">
      <a-card :bordered="false">
        <template>
          <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
            <span style="user-select: none">
              <a-tree
                @select="onSelect"
                @check="onCheck"
                @rightClick="rightHandle"
                :selectedKeys="selectedKeys"
                :checkedKeys="checkedKeys"
                :treeData="lanmTree"
                :checkStrictly="checkStrictly"
                :expandedKeys="iExpandedKeys"
                :autoExpandParent="autoExpandParent"
                @expand="onExpand"
              />
            </span>
            <!--新增右键点击事件,和增加添加和删除功能-->
            <a-menu slot="overlay">
              <a-menu-item @click="handleAdd" key="1">添加下级</a-menu-item>
              <a-menu-item @click="handleEdit" key="4">编辑</a-menu-item>
              <a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
              <!-- <a-menu-item @click="closeDrop" key="3">取消</a-menu-item> -->
            </a-menu>
          </a-dropdown>
        </template>
      </a-card>
    </a-col>
    <a-col :md="20">
      <a-card :bordered="false">
        <a-form :form="form">
          <a-row>
            <a-col :span="24">
              <a-form-item label="顺序" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['sequence']" placeholder="请输入标题"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="栏目" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-tree-select
                  style="width: 100%"
                  :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
                  :treeData="treeData"
                  v-decorator="['parentId', validatorRules.bit]"
                  placeholder="请选择父级"
                >
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['wenzbt', validatorRules.bit]" placeholder="请输入标题" disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-editor v-decorator="['wenznr', { trigger: 'input' }]" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
                 <j-select-depart :multi="false" v-decorator="['sysOrgCode']" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="职位" :labelCol="labelCol" :wrapperCol="wrapperCol">
                 <j-dict-select-tag  v-decorator="['position']" :triggerChange="true" placeholder="" dictCode="sys_position,name,code" />
              </a-form-item>
            </a-col>
            <a-col :span="24" style="text-align: center">
              <a-button type="primary" @click="submitForm">提交</a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </a-col>

    <zhisk-modal ref="modalForm" @ok="modalFormOk"></zhisk-modal>
    
  </a-row>
</template>

<script>
import JEditor from '@/components/jeecg/JEditor'
import { getAction, deleteAction, putAction } from '../../../api/manage'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import ZhiskModal from './modules/ZhiskModal'

export default {
  name: 'wenzgl',
  mixins: [],
  components: {
    JEditor,
    JSelectDepart,
    ZhiskModal
  },
  data() {
    return {
      forEditData: null,
      orgCategoryDisabled: false,
      model: {},
      disable: true,
      treeData: [],
      validatorRules: {
        bit: { rules: [{ required: true, message: '必填!' }] }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 1 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 23 },
      },
      form: this.$form.createForm(this),
      autoExpandParent: true,
      iExpandedKeys: [],
      checkStrictly: true,
      lanmTree: [],
      selectedKeys: [],
      dropTrigger: '',
      checkedKeys: [],
    }
  },
  created() {},
  mounted() {
    this.loadData()
  },
  computed: {},
  methods: {
    modalFormOk(e) {
      this.refresh()
    },

    getAllKeys(node) {
      // console.log('node',node);
      this.allTreeKeys.push(node.key)
      if (node.children && node.children.length > 0) {
        for (let a = 0; a < node.children.length; a++) {
          this.getAllKeys(node.children[a])
        }
      }
    },

    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true

          let formData = Object.assign(this.model, values)
          formData.zhiskWenzList = [{ zhubid: formData.id, wenzbt: formData.wenzbt, wenznr: formData.wenznr, sysOrgCode: formData.sysOrgCode, position: formData.position}]

          console.log('表单提交数据', formData)
          putAction('/zhisk/zhiskLanm/edit', formData, 'put')
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                this.refresh()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },

    onSelect(selectedKeys, e) {
      console.log('selected', selectedKeys, e)
      this.hiding = false
      let record = e.node.dataRef
      console.log('onSelect-record', record)
      this.currSelected = Object.assign({}, record)
      this.model = this.currSelected
      this.selectedKeys = [record.key]
      this.model.parentId = record.parentId
      this.forEditData = record

      this.form.setFieldsValue({ parentId: record.parentId })
      this.form.setFieldsValue({ wenzbt: record.title })

      getAction('/zhisk/zhiskLanm/queryZhiskWenzByMainId', { id: record.id }).then((res) => {
        if (res.success && res.result.length > 0) this.form.setFieldsValue({ wenznr: res.result[0].wenznr })
        else {
          this.form.setFieldsValue({ wenznr: '' })
          // this.$message.warning('没有找到对应的文章!')
        }
      })
    },

    handleEdit() {
      this.$refs.modalForm.parentNode = this.forEditData
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.edit()
    },
    handleAdd() {
      this.$refs.modalForm.parentNode = this.forEditData
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.add()
    },
    handleDelete() {
      var that = this

      if (this.currSelected.parentId == null) {
        that.$message.warning('根节点，不能删除!')
        return
      }

      this.$confirm({
        title: '确认删除',
        content: '确定要删除这个栏目以及子节点数据吗?',
        onOk: function () {
          deleteAction('/zhisk/zhiskLanm/delete', { id: that.rightClickSelectedKey }).then((resp) => {
            if (resp.success) {
              that.refresh()
            } else {
              that.$message.warning('删除失败!')
            }
          })
        },
      })
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
      this.hiding = false
      //this.checkedKeys = checkedKeys.checked
      // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
      if (this.checkStrictly) {
        this.checkedKeys = checkedKeys.checked
      } else {
        this.checkedKeys = checkedKeys
      }
      // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
    },
    loadData() {
      this.refresh()
    },
    loadTree() {
      var that = this
      that.treeData = []
      that.lanmTree = []
      getAction('/zhisk/zhiskLanm/queryTreeList').then((res) => {
        if (res.success) {
          //部门全选后，再添加部门，选中数量增多
          this.allTreeKeys = []
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            that.treeData.push(temp)
            that.lanmTree.push(temp)
            that.setThisExpandedKeys(temp)
            that.getAllKeys(temp)
            // console.log(temp.id)
          }
          this.loading = false
        }
      })
    },
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    refresh() {
      this.loading = true
      this.loadTree()
    },
    // 右键操作方法
    rightHandle(node) {
      this.dropTrigger = 'contextmenu'
      console.log(node.node.eventKey)
      this.rightClickSelectedKey = node.node.eventKey
      this.rightClickSelectedOrgCode = node.node.dataRef.orgCode
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    backFlowList() {
      this.$router.back(-1)
    },
    // 右键点击下拉框改变事件
    dropStatus(visible) {
      if (visible == false) {
        this.dropTrigger = ''
      }
    },
    // 右键店家下拉关闭下拉框
    closeDrop() {
      this.dropTrigger = ''
    },
    addRootNode() {
      this.$refs.nodeModal.add(this.currFlowId, '')
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>